<template>
  <el-dialog :model-value="props.modelValue" title="评论详情" width="1040px" :before-close="closePopup">
    <el-form :model="data" class="demo-form-inline" label-width="120px">
      <el-form-item v-if="!!data.reviewImageList.length > 0" label="评论图片" class="content-main">
        <div class="imgBg" style="margin-right:12px;" v-for="(img,index) in data.reviewImageList" :key="index"  @click="detailFn.openImageViewer(data.reviewImageList,index)" >
          <el-image fit="contain" style="width: 120px; height: 120px;" :src="img.imageUrl"/>
        </div>
       
      </el-form-item>
      <el-form-item v-if="data.reviewVideoList.length > 0" label="评论视频" class="content-main">
         <div class="blockBg"  v-for="(video,index) in data.reviewVideoList" :key="index">
          <video-player :src="video.fileUrl"></video-player>
          <div class="video-info">
            <p>大小：{{dealNumer(video.size / 1024 / 1024) || '--'}} M</p>
            <p>时长：{{video.duration || '--'}} s</p>
            <p>完播次数：{{video.fullPlayNum??"--"}} 次</p>
            <p>完播率：<span v-if="video.playNum">{{dealNumer(video.fullPlayNum/video.playNum,4)*100}}</span><span v-else>--</span> %</p>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closePopup">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  
</template>

<script setup>
import { reactive } from "vue";
import { dealNumer } from "@/utils/tool";
import videoPlayer from "@/components/video/videoPlayer";
import imageViewer from "@/components/imageViewer/index2";

const props = defineProps({
  data: Object,
  type: {
    //数据类型,image:图文,video:视频
    validator: (value) => ["image", "video", ""].includes(value),
  },
  modelValue: Boolean,
});
const emit = defineEmits(["update:modelValue"]);

function closePopup() {
  emit("update:modelValue", false);
}

// 数据详情模块，包括 查看详情，大图预览
const {$fn:detailFn} = (()=>{
  const $fn = {
    openImageViewer(list,index){
      let mlist = [];
      for(let prop of list||[]){
        mlist.push(prop.imageUrl)
      }
      imageViewer({initialIndex: index,urlList: mlist});
    },
  }
  return {
    $fn,
  }
})();
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: center;
}
.video-info {
  display: inline-block;
  padding-left: 12px;
  line-height: 24px;
  vertical-align: text-bottom;
}
.content-main{
  .blockBg{
    display:inline-block;
    vertical-align:top;
  }
  .imgBg{
    display: inline-block;
  }
}
</style>